// ==========================================================================
// .header-cake
//
// The nav bar used as a tertiary content-level nav that consists of a back
// button and a view title.
// ==========================================================================

.header-cake.card {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 18px;
	padding-top: 11px;
	padding-bottom: 11px;

	&::after {
		display: none;
	}

	@include breakpoint( '<660px' ) {
		margin-top: 10px;
	}
}

.header-cake__back {
	flex: none;
	display: block;
	max-width: 33.333%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	&.is-spacer {
		opacity: 0;
		cursor: default;
		z-index: -1;
	}

	&.is-action {
		.gridicon {
			margin-right: 4px;
		}
	}

	html[dir='rtl'] & {
		.gridicons-arrow-left {
			transform: scaleX( -1 );
		}
	}
}

.header-cake__title {
	flex: 1 1 auto;
	color: var( --color-neutral-70 );
	text-align: center;
	word-break: break-word;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 8px;
}
